<template>
  <div class="container">
    <Breadcrumb :style="{margin: '24px 20px'}">
      <BreadcrumbItem>用户测量数据</BreadcrumbItem>
      <BreadcrumbItem>人机交互模块</BreadcrumbItem>
    </Breadcrumb>
    <Card :style="{padding: '24px', minHeight: '680px', minWidth: '1500px', background: '#fff', marginLeft: '20px'}">
      <Row :gutter="20">
        <Col :span="16">
          <Input type="text" v-model="url_input" size="large" width="500">
            <template slot="prepend">Http://</template>
          </Input>
        </Col>
        <Col :span="8">
          <Button type="primary" icon="el-icon-share" @click="init">连接设备</Button>
        </Col>
      </Row>
      <Row :gutter="20" class="operate-btn">
        <Col :span="16">
          <Button type="primary" icon="el-icon-share" @click="startMeasure">开始测量</Button>
          <Button type="success" icon="el-icon-share" @click="result_handleClick">测量结果</Button>
        </Col>
        <Col :span="8">
          <Button type="primary" icon="el-icon-share" @click="resetScanner">设备复位</Button>
        </Col>
      </Row>
      <Row :gutter="20" class="operate-btn">
        <Col class="carousel-container" :span="16">
          <Row :gutter="20" class="operate-btn">
            <Col :span="12">
              <Carousel height="500px" :autoplay="false" indicator-position="none" :initial-index="0" arrow="never" ref="tipsPic">
                <CarouselItem v-for="(item, index) in poseInfo" :key="index">
                  <img :src="item.imgUrl" class="pose-img">
                </CarouselItem>
              </Carousel>
            </Col>
            <Col :span="12">
              <div class="action-tips-title">测量小贴士:</div>
              <div class="action-tips">保持身体站直静止，双手自然张开，目视前方</div>
            </Col>        
          </Row>
        </Col>
        <Col :span="8">
          <div class="step_title">当前测量进度</div>
          <Steps :space="90" :active="2" finish-status="success" direction="vertical">
            <Step title="设备启动"></Step>
            <Step title="体重数据采集"></Step>
            <Step title="Kinect体感数据采集"></Step>
            <Step title="厚度信息采集"></Step>
            <Step title="宽度信息采集"></Step>
            <Step title="等待数据上传"></Step>
          </Steps>
        </Col>
      </Row>
    </Card>
    <Dialog title="测量结果" :visible.sync="measure_dialogFormVisible">
      <Tag class="title" size="medium">毫米波传感器测量值</Tag>
      <Table :data="tableData1">
        <TableColumn prop="chestWidth" label="胸宽" width='80'>
        </TableColumn>
        <TableColumn prop="chestThickness" label="胸厚" width='80'>
        </TableColumn>
        <TableColumn prop="waistWidth" label="腰宽" width='80'>
        </TableColumn>
        <TableColumn prop="waistThickness" label="腰厚" width='80'>
        </TableColumn>
        <TableColumn prop="hipsWidth" label="臀宽" width='80'>
        </TableColumn>
        <TableColumn prop="hipsThickness" label="臀厚" width='80'>
        </TableColumn>
        <TableColumn prop="legThickness" label="腿中围厚" width='80'>
        </TableColumn>
        <TableColumn prop="shoulderWidth" label="肩宽" width='80'>
        </TableColumn>
        <TableColumn prop="height" label="身高" width='80'>
        </TableColumn>
      </Table>
      <Tag class="title mt10" size="medium">Kinect相机测量值</Tag>
      <Table :data="tableData2">
        <TableColumn prop="armLength" label="臂长" width='80'>
        </TableColumn>
        <TableColumn prop="legLength" label="腿长" width='80'>
        </TableColumn>
        <TableColumn prop="bodyLength" label="躯干长" width='80'>
        </TableColumn>
        <TableColumn prop="headLength" label="头部长" width='80'>
        </TableColumn>
      </Table>
      <div class="btn mt10">测量数据上传</div>
    </Dialog>
  </div>
</template>
<script>
export default {
  name: "index",
  data () {
    return {
      measure_dialogFormVisible: false,
      url_input: 'localhost:3000',
      isConnected: false,
      url: 'ws://127.0.0.1:3000',
      stepNum: 0,
      poseInfo: [{
        desc: 'pose1',
        imgUrl: 'img/pose1.jpg'
      }, {
        desc: 'pose2',
        imgUrl: 'img/pose2.jpg'
      }, {
        desc: 'pose3',
        imgUrl: 'img/pose3.jpg'
      }],
      tableData1: [{
        "chestThickness": 256,
        "chestWidth": 305,
        "height": 1579,
        "hipsThickness": 271,
        "hipsWidth": 381,
        "legThickness": 210,
        "shoulderWidth": 348,
        "waistThickness": 217,
        "waistWidth": 290
      }],
      tableData2: [{
        "armLength": 411,
        "bodyLength": 546,
        "headLength": 226,
        "legLength": 641,
      }]
    }
  },
  mounted () {
    // this.$notify({
    //   title: '提示',
    //   message: '保持身体站直静止，双手自然张开，目视前方',
    //   duration: 0,
    //   offset: 500
    // });
  },
  methods: {
    result_handleClick(row) {
      this.measure_dialogFormVisible = true
    },
    init () {
      if(typeof(WebSocket) === "undefined"){
        alert("您的浏览器不支持socket")
      }else{
        // 实例化socket
        this.socket = new WebSocket(this.url)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
        // 监听socket关闭连接
        this.socket.onclose = this.close
      }
    },
    startMeasure () {
      this.send('start Measure')
    },
    resetScanner () {
      this.send('reset Measure')
    },
    // 以下均为监听函数
    open: function () {
      this.$message({
        message: '设备连接成功',
        type: 'success'
      });
    },
    error: function () {
      this.$message.error('找不到设备或者连接失败');
    },
    getMessage: function (msg) {
      console.log(msg.data)
      if (msg.data === 'step2') {
        this.stepNum = 1
        this.$refs.tipsPic.setActiveItem(1)
        this.$confirm('请按照屏幕指示站立，等待继续测量', '提示', {
          confirmButtonText: '我已准备好'
        })
      }
      if (msg.data === 'step3') {
        this.$refs.tipsPic.setActiveItem(2)
        this.stepNum = 2
        this.$message({
          message: '请转换至屏幕指示的姿势',
          type: 'info'
        });
      }
    },
    send: function (params) {
      this.socket.send(params)
    },
    close: function () {
      console.log("socket已经关闭")
    }
  }
}
</script>
<style scoped lang="less">
.action-tips-title {
  font-weight: 700;
  color: #303133;
  text-align: left;
}
.action-tips {
  padding: 50% 10px;
  font-weight: 500;
  color: #303133;
  text-align: center;
}
.step_title {
  font-weight: 700;
  color: #303133;
  margin: 20px 0;
}
.el-row  {
  margin-bottom: 20px;
}
.carousel-container {
  margin-top: 20px;
}
.pose-img {
  height: 500px;
}
.mt10 {
  margin-top: 20px;
}
.btn {
  width: 150px;
  height: 40px;
  background-color: pink;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
</style>